<template>
  <div id="shareCountBar">
    <h3 class="echarts-title">
      渠道分享统计
    </h3>
    <div id="shareBarEcharts"></div>
  </div>
</template>

<script>
import { getShareBar } from '@/api/shareBackFlow/echartsData/index.js' // 接口
export default {
  name: 'shareCountBar',
  msg: '',
  data() {
    return {
      myCharts: null,
      option: {
        // legend: {
        //   data: ['APP', 'M站', '小程序']
        // },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        xAxis: {
          type: 'category'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top',
              formatter: function(res) {
                let str = `${res.data}%`
                return str
              }
            },
            type: 'bar'
          }
        ]
      }
    }
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      this.myCharts = this.echarts.init(
        document.getElementById('shareBarEcharts')
      )
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.myCharts.resize()
      })
      this.myCharts.setOption(this.option)
    },
    searchList(date, type) {
      this.myCharts.showLoading()
      let params = {
        statisticDate: date,
        timeDimension: type
      }
      getShareBar(
        params,
        (res) => {
          let opt = {
            xAxis: {
              data: res.names
            },
            series: [
              {
                data: res.dataset
              }
            ]
          }
          this.myCharts.setOption(opt)
          this.myCharts.hideLoading()
        },
        (response) => {
          this.myCharts.hideLoading()
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    }
  }
}
</script>

<style lang="less">
#shareCountBar {
  #shareBarEcharts {
    width: 100%;
    height: 380px;
  }
}
</style>
